import React, { useEffect, useState } from 'react'
import { List, InfiniteScroll } from 'antd-mobile'
import { ListItem } from 'antd-mobile/es/components/list/list-item';
import { useNavigate } from 'react-router-dom';
import { getProductList } from '@/models'
import "./Prolist.scss";

export default function Prolist() {
    const navigate = useNavigate();
    let [count, setCount] = useState(1); // 当前页面
    let [list, setList] = useState([]);  //存储商品的列表
    const [hasMore, setHasMore] = useState(true) //是否有更多数据
    useEffect(() => {
        getProductList().then((res) => {
            console.log(res);
            setList(res.data);
        })
    }, [])
    async function loadMore() {  //上拉加载
        count++
        setCount(count)
        const append = await getProductList(count)  //取下一页面的数据
        setList(val => [...val, ...append.data])
        setHasMore(append.data.length > 0)  //有数据才进行加载
    }

    return (
        <div className='list'>
            <List>
                {
                    list.map((item, index) => {
                        return <ListItem key={index} onClick={() => navigate("/details/" + item.proid)} arrow={false}>
                            <img src={item.img1} alt='' />
                            <h6 className='desc'>{item.desc}</h6>
                            <p className='price'>￥{item.originprice}</p>
                        </ListItem>
                    })
                }
            </List>
            <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
        </div>

    )
}
